<template>
  <div :class="{'dark':darkMode}" class="min-w-min">
  <div class="bg-white dark:bg-dim-900">
<!--    loading-->
    <LazyLoadingPage v-if="isAuthLoading"/>
<!--    内容 -->
    <div  v-else-if="user" class="min-h-full">
      <div class="grid grid-cols-12 mx-auto sm:px-6 lg:max-w-7xl lg:px-8
  lg:gap-5">
        <!-- left -->
        <div class="hidden md:!block xs-col-span-1 xl:col-span-2">
          <div class="sticky top-0">    <!--          自动引入 根据命名-->
            <SidebarLeft :user="user" @on-tweet="()=>openPostTweetModal(null)" @on-logout="handleUserLogout" />
          </div>
        </div>

        <!--        main-->
        <main class="col-span-12 md:col-span-8 xl:col-span-6 ">
          <router-view />
        </main>
        <!--      right  -->
        <div class=" hidden  md:!block xs-col-span-4  md:col-span-3">
               <div class="sticky top-0">
                 <SidebarRight />
               </div>
          </div>
      </div>
    </div>
<!--   登录页 -->
    <AuthPage v-else />

<!--    表单弹窗-->
    <UIModal :isOpen="postTweetModal" @on-close="closePostTweetModal">
      <TweetForm :replyTo="replyTweet" showReply :user="user" @onSuccess="handleFormSuccess" />
    </UIModal>

  </div>
  </div>
</template>
<script setup>
import useAuth from "~/composables/useAuth.js";
const darkMode = ref(false)
const {useAuthUser , useAuthLoading,initAuth,logout} =  useAuth()
const {  openPostTweetModal,usePostTweetModal ,useReplyTweet,closePostTweetModal } = useTweets()

const isAuthLoading = useAuthLoading()
const user = useAuthUser()
const emitter = useEmitter()

const postTweetModal = usePostTweetModal()
const replyTweet = useReplyTweet()

emitter.$on('replyTweet', (tweet) => {
  openPostTweetModal(tweet)
})

emitter.$on('toggleDarkMode', () => {
  darkMode.value = !darkMode.value
})
const handleFormSuccess =(tweet)=>{
  closePostTweetModal()
  navigateTo({
               path: `/status/${tweet.id}`
})
}
const handleUserLogout =()=>{
  logout()
}
onBeforeMount(()=>{
//   cookie刷新
  initAuth()

})
</script>